<script lang="ts" setup>
import Lottie from "lottie-web";
import { onMounted, ref } from "vue";
// import data from "../assets/json/animation.json";

let anim: any;
const lottieRef = ref(null);

onMounted(() => {
  if (!lottieRef.value) return;

  anim = Lottie.loadAnimation({
    container: lottieRef.value as HTMLElement,
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "/static/json/animation.json",
    // animationData: data,
  });
});

const handleClick = () => {
  if (anim) {
    // anim.stop();
    anim.pause();
  }
};

const handleClick1 = () => {
  if (anim) {
    anim.play();
  }
};
</script>

<template>
  <div ref="lottieRef" class="lottie-div"></div>

  <div class="lottie-btn">
    <button @click="handleClick">暂停</button>
    <button @click="handleClick1">播放</button>
  </div>
</template>

<style scoped>
.lottie-div {
  width: 100%;
  height: 100%;
  border: 1px solid pink;
  overflow: hidden;
}

.lottie-btn {
  position: absolute;
  top: 60px;
  right: 60px;
  display: flex;
  gap: 10px;
}
</style>
